<template>
  <div class="app-container">
    <el-row>
      <el-col :span="6" class="tree">
        <el-tree :data="treeData" highlight-current :props="defaultProps" @node-click="handleNodeClick"></el-tree>
      </el-col>
      <el-col class="DictionaryForm" :span="14" :offset="1">
        <h3 style="text-align:center" v-if="title">正在{{title}}</h3>
        <el-form ref="form" :disabled="disabled" :model="form" label-width="80px" size="small">
          <el-col :span="16">
            <el-form-item label="字典名:" prop="dicName">
              <el-input v-model="form.dicName" placeholder="字典名"></el-input>
            </el-form-item>
            <el-form-item label="值:" prop="dicValue">
              <el-input v-model="form.dicValue" placeholder="值"></el-input>
            </el-form-item>
            <el-form-item label="组:" prop="dicGroup">
              <el-input v-model="form.dicGroup" placeholder="组"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="排序:" prop="dicSort">
              <el-slider v-model="form.dicSort" show-input :min="1">
              </el-slider>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="操作:">
              <el-button type="primary" round @click="addSameLevel">添加同级字典</el-button>
              <el-button type="primary" round @click="addSubLevel">添加下级字典</el-button>
              <el-button type="danger" round @click="deleteDic">删除</el-button>
              <el-button type="primary" round @click="save">保存</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getDictionary, insertDictionary, updateDictionary, deleteDictionary } from '@/api/dictionary'

export default {
  data() {
    return {
      form: {
        id: null,
        pid: null,
        dicName: "",
        dicValue: "",
        dicGroup: "",
        dicSort: 1
      },
      disabled: true,
      title: "",
      choosedDic: {},
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'dicName'
      }
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    loadData() {
      getDictionary().then(res => {
        if (res.flag) this.treeData = res.data
      })
    },
    handleNodeClick(dic) {
      Object.keys(this.form).forEach(key => this.form[key] = dic[key])
      this.title = "修改字典"
      this.disabled = false
      this.choosedDic = dic
    },
    addSameLevel() {
      this.title = "添加同级字典"
      this.resetForm()
      this.form.pid = this.choosedDic.pid
    },
    addSubLevel() {
      this.title = "添加下级字典"
      this.resetForm()
      this.form.pid = this.choosedDic.id
    },
    showResult(res) {
      if (res.flag) {
        this.$message.success(res.msg)
        this.loadData()
        this.resetForm()
      }
      this.disabled = true
    },
    save() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.id) updateDictionary(this.form).then(res => this.showResult(res))
          else insertDictionary(this.form).then(res => this.showResult(res))
        } else {
          return false;
        }
      });
    },
    deleteDic() {
      this.$confirm('确定删除此字典和下属字典?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteDictionary([this.choosedDic.id]).then(res => this.showResult(res))
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    resetForm() {
      this.$refs['form'].resetFields()
      this.form.id = null
      this.form.pid = null
    }
  }
}
</script>

<style scoped>
.tree {
  height: 550px;
  overflow: auto;
  border: 1px solid #ddd;
}
.DictionaryForm {
  padding: 10px 20px;
  border: 1px solid #ddd;
}
</style>